<template>
	<view class="account">
		<view class="account-title">账号管理</view>
		<scroll-view scroll-x>
			<view class="item" @click="accountClick()">
				<view class="item-box">
					<view class="item-box-left">
						<view class="name">小红书账号</view>
						<view class="fans">粉丝: 56.6W</view>
					</view>
					<view class="item-box-right">
						<view class="icon">
							<u-image
								class="image" 
								width="88rpx" 
								height="60rpx" 
								src="/static/icons/xiaohongshu1_icon.png"></u-image>
						</view>
					</view>
				</view>
			</view>
			<view class="item" @click="accountClick()">
				<view class="item-box">
					<view class="item-box-left">
						<view class="name">新浪微博账号</view>
						<view class="fans">粉丝: 56.6W</view>
					</view>
					<view class="item-box-right">
						<view class="icon">
							<u-image
								class="image" 
								width="60rpx" 
								height="60rpx" 
								src="/static/icons/weibo1_icon.png"></u-image>
						</view>
					</view>
				</view>
			</view>
			<view class="item" @click="accountClick()">
				<view class="item-box">
					<view class="item-box-left">
						<view class="name">抖音账号</view>
						<view class="fans">粉丝: 56.6W</view>
					</view>
					<view class="item-box-right">
						<view class="icon">
							<u-image
								class="image" 
								width="60rpx" 
								height="60rpx" 
								src="/static/icons/douyin1_icon.png"></u-image>
						</view>
					</view>
				</view>
			</view>
			<view class="item" @click="accountClick()">
				<view class="item-box">
					<view class="item-box-left">
						<view class="name">快手账号</view>
						<view class="fans">粉丝: 56.6W</view>
					</view>
					<view class="item-box-right">
						<view class="icon">
							<u-image
								class="image" 
								width="60rpx" 
								height="60rpx" 
								src="/static/icons/kuaishou1_icon.png"></u-image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	methods: {
		/* 添加点击事件 */
		accountClick(e){
			this.$emit('click',e);
		},
	},
}
</script>

<style lang="scss" scoped>
.account {
	width: 750rpx;
	padding-left: 25rpx;
	margin-bottom: 20rpx;
	&-title {
		display: flex;
		align-items: center;
		height: 90rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: $u-text-color;
	}
	scroll-view {
		height: 148rpx;
		white-space: nowrap;
	}
	.item {
		display: inline-block;
		margin-right: 20rpx;
		&-box {
			display: flex;
			align-items: center;
			width: 320rpx;
			height: 148rpx;
			background-color: $u-bg-white-color;
			border-radius: 10rpx;
			background-image: url("/static/img/account_bg.png");
			background-size: cover;
			background-repeat: no-repeat;
			&-left {
				display: flex;
				flex-direction: column;
				flex: 1;
				justify-content: space-between;
				height: 74rpx;
				padding-left: 30rpx;
				.name {
					font-size: 30rpx;
					font-weight: 600;
					color: $u-text-color;
				}
				.fans {
					font-size: 26rpx;
					color: $u-text-color;
				}
			}
			&-right {
				.icon {
					margin-right: 28rpx;
				}
			}
		}
	}
}
</style>
